<template>
    <div class="hotspot">
        <!-- search -->
        <div class="search">
            <input type="text" @focus="inputFocus" @blur="inputBlur" v-model="searchInput" class="searchInput" />
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll :data="hotspotList" class="hotspot-wrapper" :pullup="pullup" @scrollToEnd="searchMore" v-show="!searchInput">
            <div>
                <div class="hotspot-item-first">
                    <router-link :to="'/detail/' + hotspotListFirst.id" tag="div">
                        <h3>{{hotspotListFirst.title}}</h3>
                        <img class="hotspot-img" :src="hotspotListFirst.img" />
                        <div class="hotspot-info">
                            <div class="hotspot-eye">
                                <i class="eye-icon"></i>
                                <span class="num">{{hotspotListFirst.eye}}</span>
                            </div>
                            <div class="hotspot-like">
                                <i class="like-icon"></i>
                                <span class="num">{{hotspotListFirst.like}}</span>
                            </div>
                            <div class="hotspot-comment">
                                <i class="commen-icon"></i>
                                <span class="num">{{hotspotListFirst.comment}}</span>
                            </div>
                        </div>
                    </router-link>
                </div>
                <ul class="hotspot-item">
                    <router-link v-for="(item, index) in hotspotList" :to="'/detail/' + item.id" :key="item.id" tag="li">
                        <div class="left">
                            <img class="hotspot-img" :src="item.img" />
                        </div>
                        <div class="right">
                            <h3>{{item.title}}</h3>
                            <div class="hotspot-info">
                                <div class="hotspot-eye">
                                    <i class="eye-icon"></i>
                                    <span class="num">{{item.eye}}</span>
                                </div>
                                <div class="hotspot-like">
                                    <i class="like-icon"></i>
                                    <span class="num">{{item.like}}</span>
                                </div>
                                <div class="hotspot-comment">
                                    <i class="commen-icon"></i>
                                    <span class="num">{{item.comment}}</span>
                                </div>
                            </div>
                        </div>
                    </router-link>
                    <loading v-show="hasMore"></loading>
                    <li class="bottom-text" v-show="!hasMore">已加载全部数据</li>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!hotspotList.length">
                <loading></loading>
            </div>
        </scroll>
        <scroll :data="list" v-show="list.length" class="hotspot-wrapper">
            <ul class="hotspot-item">
                <router-link v-for="(item, index) in list" :to="'/detail/' + item.id" :key="item.id" tag="li">
                    <div class="left">
                        <img class="hotspot-img" :src="item.img" />
                    </div>
                    <div class="right">
                        <h3>{{item.title}}</h3>
                        <div class="hotspot-info">
                            <div class="hotspot-eye">
                                <i class="eye-icon"></i>
                                <span class="num">{{item.eye}}</span>
                            </div>
                            <div class="hotspot-like">
                                <i class="like-icon"></i>
                                <span class="num">{{item.like}}</span>
                            </div>
                            <div class="hotspot-comment">
                                <i class="commen-icon"></i>
                                <span class="num">{{item.comment}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
            </ul>
        </scroll>
        <div class="no-result" v-show="!list.length && searchInput">暂无搜索结果</div>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                title: '近期热点',
                pullup: true,
                hasMore: true,
                list: [],
                hotspotListFirst: [],
                hotspotList: [],
                hotspotListAll: []
            }
        },
        methods: {
            // 获取焦点
            inputFocus () {
                this.searchShow = false
            },
            // 失去焦点
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            searchMore () {
                setTimeout(() => {
                    this.hasMore = false
                }, 2000)
            },
            getHotSpotInfo () {
                axios.get('./static/hotspot.json').then((res) => {
                    res = res.data
                    this.hotspotListFirst = res.data.hotspotList[0]
                    this.hotspotList = this.curtail(res.data.hotspotList)
                    this.hotspotListAll = res.data.hotspotList
                    // console.log(this.hotspotList)
                })
            },
            // 删除数组中的首个元素
            curtail (arr) {
                return arr.filter(function(ele,idx,arr){
                return idx !== 0;
                })
            }
        },
        watch: {
            // 监听input变化进行搜索判断
            searchInput () {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                for (let m in this.list) {
                    console.log(this.list)
                    var value = this.list[m].title
                    if(value.indexOf(this.searchInput) > -1 && this.searchInput) {
                        return
                    }
                }
                this.timer = setTimeout(() => {
                    let result = []
                    if(this.searchInput === "") {
                        result = []
                        this.list = []
                        return
                    }
                    for (let i in this.hotspotListAll) {
                        let value = this.hotspotListAll[i].title
                        if(value.indexOf(this.searchInput) > -1) {
                            result.push(i)
                        }
                    }
                    for(let k in result) {
                        this.list = this.list.concat(this.hotspotListAll[result[k]])
                    }
                    // console.log(this.list)
                },100)
            }
        },
        components: {mTitle,Scroll,Loading},
        created() {
            this.getHotSpotInfo()
        },
    }
</script>

<style lang="stylus" scoped>
    .hotspot
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .no-result
            padding: 0 15px
            line-height: 30px
            font-size: 16px
        .hotspot-wrapper
            position: absolute
            overflow: hidden
            top: 86px
            left: 0
            right: 0
            bottom: 0px
            box-sizing: border-box
            width: 100%
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .hotspot-item-first
                width: 100%
                padding: 0 15px
                margin-bottom: 30px
                box-sizing: border-box
                -webkit-box-sizing: border-box
                h3
                    font-size: 16px
                    font-weight: 700
                    line-height: 160%
                .hotspot-img
                    width: 100%
                    display: block
                    margin-top: 4px
                .hotspot-info
                    margin-top: 8px
                    font-size: 0
                    text-align: right
                    .hotspot-eye,.hotspot-like,.hotspot-comment
                        display: inline-block
                        font-size: 0
                        .eye-icon
                            display: inline-block
                            vertical-align: middle
                            background: url('./eye-icon.png') no-repeat
                            width: 16px
                            height: 11px
                            background-size: 100% 100%
                        .num
                            font-size: 12px
                            color: #000
                            margin-left: 6px
                            display: inline-block
                            vertical-align: middle
                        .like-icon
                            display: inline-block
                            vertical-align: middle
                            background: url('./like-icon-active.png') no-repeat
                            width: 13px
                            height: 12px
                            background-size: 100% 100%
                            margin-left: 14px
                        .commen-icon
                            display: inline-block
                            vertical-align: middle
                            background: url('./comment-icon-active.png') no-repeat
                            width: 15px
                            height: 13px
                            background-size 100% 100%
                            margin-left: 14px
            .hotspot-item
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                -webkit-box-sizing: border-box
                li
                    width: 100%
                    padding: 0 0 20px 0
                    display: flex
                    &:nth-child(1)
                        padding-top: 10px
                    &.bottom-text
                        width: 100%
                        height: 40px
                        line-height: 40px
                        font-size: 14px
                        text-align: center
                        color: #ddd
                        justify-content: center
                        margin-top: -10px
                        padding: 0
                    .left
                        width: 125px
                        flex: 0 0 125px
                        img
                            width: 100%
                    .right
                        flex: 1
                        margin-left: 14px
                        position: relative
                        h3
                            font-size: 12px
                            font-weight: 700
                            line-height: 140%
                            color: #000
                        .hotspot-info
                            margin-top: 6px
                            font-size: 0
                            text-align: left
                            position: absolute
                            bottom: 0
                            .hotspot-eye,.hotspot-like,.hotspot-comment
                                display: inline-block
                                font-size: 0
                                .eye-icon
                                    display: inline-block
                                    vertical-align: middle
                                    background: url('./eye-icon.png') no-repeat
                                    width: 16px
                                    height: 11px
                                    background-size: 100% 100%
                                .num
                                    font-size: 12px
                                    color: #000
                                    margin-left: 6px
                                    display: inline-block
                                    vertical-align: middle
                                .like-icon
                                    display: inline-block
                                    vertical-align: middle
                                    background: url('./like-icon-active.png') no-repeat
                                    width: 13px
                                    height: 12px
                                    background-size: 100% 100%
                                    margin-left: 14px
                                .commen-icon
                                    display: inline-block
                                    vertical-align: middle
                                    background: url('./comment-icon-active.png') no-repeat
                                    width: 15px
                                    height: 13px
                                    background-size 100% 100%
                                    margin-left: 14px
</style>>